{% extends '__base_local__.html' %}

{% block title %}数据库{% endblock %}
{% block beforehead %}
<!-- <script src="https://unpkg.com/vue@next"></script> -->
<script src="static/vue.global.js.js"></script>
{% endblock %}
{% block content %}

<!-- Content Header (Page header) -->

<section class="content-header">
    <h1>
        数据库
        <small>数据库操作</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="/"><i class="fa fa-dashboard"></i> Home</a></li>
        <li class="active">数据库</li>
    </ol>
</section>

<div class="container" id="main">
    <div class="row">
        <div class="col">
            <h1>Index</h1>
        </div>
    </div>
</div>

{% endblock %}

{% block beforebody %}
<script>
    let isJSON = function (str) {
        if (str.length <= 0) return false
        if (typeof str !== 'string') return false
        str = str.replace(/\\["\\\/bfnrtu]/g, '@').
            replace(/"[^"\\\n\r]*"|true|false|null|-?\d(?:\.\d*)?(?:[eE][\-]?\d)?/g, '').
            replace(/(?:^|:|,)(?:\s*\[) /g, '')
        return /^[\[\{].*[\}\]]$/.test(str)
    }
    let database = {
        // data返回值是暴露的属性
        data() {
            return {
                // path: ['/root'],
                sql: '',
                result: ''
            }
        },
        props: ['index'],
        methods: {
        },
        delimiters: ['+{', '}'],
        template: `
            <div class="row">
                <textarea class="col-md-6" style="resize: none;" name="sql" rows="5" v-model="sql"></textarea>
                <button class="btn btn-primary col-md-2" @click="execute">Execute</button>
            </div>
            <div class="row">
                <textarea class="col-md-8" style="resize: none;" name="result" rows="10" :value="result"></textarea>
            </div>
            `,
        mounted() {
        },
        watch: {
        },
        updated() {
        },
        methods: {
            execute() {
                console.log(this.sql)
                axios.post('database/execute', {
                    sql: this.sql,
                })
                    .then(
                        response => {
                            // console.log(response);
                            if (response.status === 200) {
                                let data = response.data
                                if (data['code'] === 0) {
                                    console.log('SUCCESS: ' + data['msg'])
                                } else {
                                    console.log('FAILED: ' + data['msg'])
                                }
                                // this.result = data['msg']
                                this.result = isJSON(data['msg']) ? this.formatItem(JSON.parse(data['msg'])) : data['msg']
                                // this.result = JSON.stringify(this.formatItem(data['msg']), null, "\t")
                            }
                        })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            formatItem(item) {
                let result
                if (Object.prototype.toString.call(item) === '[object Array]') {
                    result = []
                    for (key in item) {
                        result.push(isJSON(item[key]) ? this.formatItem(JSON.parse(item[key])) : item[key])
                    }
                } else {
                    result = {}
                    for (key in item) {
                        // console.log(item[key])
                        result[key] = isJSON(item[key]) ? this.formatItem(JSON.parse(item[key])) : item[key]
                        // result[key] = item[key]
                    }
                }
                return JSON.stringify(result, null, "\t")
            },
        },
        computed: {
        }
    }
    const app = Vue.createApp(database)
    // mount方法返回根组件实例
    const vm = app.mount('#main')
</script>
{% endblock %}